<template>
  <view class="resultPage">
    <view class="viewline"></view>
    <view class="teacherList" v-if="!type">
<!--      <view-->
<!--        class="teacher"-->
<!--        v-for="(item, index) in teacherData"-->
<!--        :key="index"-->
<!--        @click="handleDetail(item)">-->
<!--        <image class="teacherImg" :src="item.image" mode="aspectFill"></image>-->
<!--        <view class="teacherTel">-->
<!--          <text>{{ item.name }}</text>-->
<!--          <text class="tel">{{ item.mobile }}</text>-->
<!--        </view>-->
<!--        <view class="teacherJj">-->
<!--          {{ item.desc }}-->
<!--        </view>-->
<!--      </view>-->
	    <view class="moreContent">
		    <view v-for="(item,index) in teacherData">
			    <view class="moreList" @click="handleDetail(item)">
				    <image class="imgs" :src="item.image" mode="aspectFill"></image>
				    <view class="u-flex u-flex-col u-row-around u-m-l-20">
					    <view class="cent-bo-b-l u-m-b-10 u-ellipsis-1" style="width: 63vw;display: flex;justify-content: flex-start">
						    <view style="color:#333;font-weight: bold">{{item.name}}</view>
						    <!--						  <view class="cent-bo-b-r u-m-l-20  u-ellipsis-1" style="color:#626161;font-weight: normal">{{item.job}}</view>-->
					    </view>
					    <view class="u-ellipsis-2" style="width: 63vw;" v-html="item.desc"></view>
				    </view>
			    </view>
		    </view>
	    </view>
    </view>
    <view class="flex goods-box" v-else>
      <view
        class="mt10 goods-item"
        v-if="goods"
        v-for="(item, index) in goods"
        @click="goodsdetail(item.id)">
        <view class="bga box bg">
          <image :src="item.image" mode="widthFix" style="width: 100%"></image>
          <view
            style="display: flex; align-items: center; line-height: 30px"
            class="f16">
            <view class="lianghang c3" style="padding-right: 10px">
              {{ item.project_name }}
            </view>
            <view style="margin-left: auto">
              <u-icon name="star" size="30"></u-icon>
            </view>
          </view>
          <view class="f14 c6 lianghang">
            <view class="goodsCont" v-html="item.project_desc"></view>
          </view>
        </view>
      </view>
    </view>
    <u-empty
      text="暂无数据"
      mode="list"
      v-if="teacherData.length == 0 && goods.length == 0"></u-empty>
  </view>
</template>

<script>
export default {
  computed: {},

  data() {
    return {
      teacherData: [],
      goods: [],
      type: "",
    };
  },
  onLoad(opt) {
    console.log(opt.type, "opt");
    this.type = opt.type;
    this.getlist();
  },
  methods: {
    getlist(val) {
      if (this.type) {
        this.$http("project.list", {
          search: uni.getStorageSync("searchVal"),
        }).then((res) => {
          console.log(res, "goods");
          if (res.code === 1) {
            this.goods = res.data.data;
          }
        });
      } else {
        this.$new_http("finance.teachlist", {
          search: uni.getStorageSync("searchVal"),
        }).then((res) => {
          this.teacherData = res.data.data;
        });
      }
    },
    // 名师详情
    handleDetail(val) {
      uni.navigateTo({
        url: "/pages/finance/teacherDetail?val=" + val.id,
      });
    },
    goodsdetail(e) {
      uni.navigateTo({
        url: "/pages/index/project_list/detail?id=" + e,
      });
    },
  },
};
</script>

<style lang="scss">
.resultPage {
  min-height: 100%;
  background: #fff;
  padding-bottom: 130rpx;
  padding-bottom: calc(env(safe-area-inset-bottom) / 2);

  .viewline {
    width: 100%;
    height: 12rpx;
    background: #f7f7f7;
  }

  .teacherList {
    padding: 0 30rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .teacher {
      width: 327rpx;
      // height: 390rpx;
      background: #ffffff;
      box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.12);
      border-radius: 20rpx;
      margin-top: 30rpx;
      padding: 0 24rpx;
      padding-bottom: 23rpx;

      .teacherImg {
        width: 170rpx;
        height: 170rpx;
        border-radius: 50%;
        display: block;
        margin: 20rpx auto 26rpx;
      }

      .teacherTel {
        display: flex;
        justify-content: space-between;
        font-size: 28rpx;
        color: #333;

        .tel {
          font-size: 24rpx;
          color: #666666;
        }
      }

      .teacherJj {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        text-overflow: ellipsis;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #333333;
        line-height: 33rpx;
        text-align: justify;
        font-style: normal;
        margin-top: 19rpx;
      }
    }
  }

  .goods-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 30rpx;
    background: #fff;
  }

  .goods-item {
    box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.12);
    padding: 20rpx;
    border-radius: 20rpx;
    width: 48%;
    box-sizing: border-box;
    margin-bottom: 30rpx;
  }

  .goodsCont {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
}
.moreContent {
	padding: 0 20rpx;
	.moreList {
		width: 100%;
		padding: 24rpx 10rpx 24rpx 10rpx;
		background: #ffffff;
		border-radius: 16rpx;
		margin-top: 20rpx;
		display: flex;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.12);
		.imgs {
			width: 170rpx;
			height: 170rpx;
			border-radius: 20rpx;
		}
		
		.moreRight {
			width: 431rpx;
			margin-left: 28rpx;
			
			.companyType {
				display: -webkit-box;
				overflow: hidden;
				text-overflow: ellipsis;
				word-break: break-all;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
			}
			
			.name {
				font-family: PingFang;
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
			}
			
			.hite {
				margin-top: 20rpx;
				font-family: PingFang;
				font-weight: 500;
				font-size: 28rpx;
				color: #666666;
				line-height: 42rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
}
</style>
